<template>
  <div class="newsPane">
    <div class="newsTitle">
    <div class="el-icon-chat-line-square">资讯</div>
    </div>
    <div class="newsInfo" v-for="(New,index) in news" >
      <a href="#"><span class="newsDesc">{{ New.ndesc }}</span>
       <span class="newsdate">{{ New.date }}</span></a>
    </div>
    <ranklist></ranklist>
  </div>
</template>

<script>
  import api from "../../../axios/api";
  import ranklist from "@/components/public/ranklist.vue"

  export default {
    name: "news",
    components:{ranklist},
    data() {
      return {
        news: []
      }
    },
    methods: {
      setDataFromAxios: function () {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/news", null, "post")
          .then(res => {
            this.news = res;
            console.log(res)

          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },

    },
    created() {
      this.setDataFromAxios();
    }
  }
</script>

<style scoped lang="stylus">
  .newsPane

    float left
    width 330px
    height 170px

    .newsTitle
      font-size 17px
      margin 10px 0 0 20px
      width 120px
      height 24px
    .newsInfo
      span
       display inline-block

      a
       text-decoration none
       color black
      margin-left 23px
      position relative
      height 30px
      .newsDesc
        width 180px
        overflow: hidden;
        white-space nowrap
        text-overflow: ellipsis;
        font-size 13px
      .newsdate
        position absolute
        width 80px
        right 0
        font-size 13px


    .el-icon-chat-line-square
      font-weight 600


</style>
